<template>
  <div class="advertisement-center">
    <div class="advertisement-left">
      <Form
        ref="editForm"
        :model="form"
        :rules="diyData.rules"
        :label-width="120"
      >
      <FormItem label="优惠券名称：" prop="title">
          <Input
                  placeholder="请输入优惠券名称"
                  v-model="form.title"
                  :disabled='query.id?true:false'
                  class="max-w200"
                />
        </FormItem>
        <FormItem label="优惠券类型：" prop="pid">
          <Select class="max-w200" :disabled='query.id?true:false' v-model="form.type" filterable placeholder="请选择优惠券类型：">
            <Option value="1">直减券</Option>
            <Option value="2">满减券</Option>
            <Option value="3">折扣券</Option>
          </Select>
        </FormItem>
        <FormItem label="可用类别：" >
           <treeselect
                style="width: 250px"
                :disabled='query.id?true:false'
                    v-model="typeList"
                    :multiple="true"
                    :options="apiData.producttypeList"
                    placeholder="请选择"
                    />
                    <!-- <Select clearable
                style="width:200px;"
                multiple
                v-model="typeList"
                placeholder="商品分类"
              >
             <Option v-for="(item,index) in apiData.producttypeList" :key="index" :value="item.id+''" :label="item.name">
              <div :class="item.level==2?'pdl10':''"><span v-if="item.level==2">————</span>{{item.name}}</div>
             </Option>
       
            </Select> -->
        </FormItem>
         <FormItem label="状态" prop="status">
          <Select class="max-w200" :disabled='query.id?true:false' v-model="form.status" filterable placeholder="请选择状态">
            <Option value="1">生效中</Option>
            <Option value="2">暂停中</Option>
            <Option value="3">已过期</Option>
            <Option value="4">已作废</Option>
          </Select>
        </FormItem>
        <FormItem label="优惠券折扣：" prop="discountAmount" v-if="form.type">
            <template v-if="form.type==3">
              <div>
                <Input
                  placeholder="请输入请输入折扣"
                  :disabled='query.id?true:false'
                  v-model="form.rate"
                  style="width:210px"
                />
              </div>                
                <p style="margin-left:10px;color:#ff0000">备注:8.5  表示85折</p>
            </template>
            <template v-if="form.type==1">
                <span>直减</span>
                <Input
                  placeholder="输入直减金额"
                  :disabled='query.id?true:false'
                  v-model="form.discountAmount"
                  style="width:100px;margin:0px 10px"
                />
                 <span>元</span>
            </template>
            <template v-if="form.type==2">
                 <span >满</span>
                <Input
                  placeholder="￥0.0"
                  :disabled='query.id?true:false'
                  v-model="form.qualifiedAmount"
                  style="width:60px;margin:0px 10px"
                />
                 <span>减</span>
                 <Input
                  placeholder="￥0.0"
                  :disabled='query.id?true:false'
                  v-model="form.discountAmount"
                 style="width:60px;margin:0px 10px"
                />
            </template>
        </FormItem>
        <FormItem label="优惠有效期：" prop="imUrl">
                <span>领取后</span>
                <Input
                  placeholder="有效期"
                  v-model="form.validityDay"
                  :disabled='query.id?true:false'
                  style="width:80px;margin:0px 10px"
                />
                 <span>天内有效</span>
        </FormItem>
        <FormItem label="发放数量：" prop="imUrl">
          <div>
            <Input
                  placeholder="发放数量"
                  v-model="form.num"
                  style="width:80px;margin:0px 10px"
                />
                <span>张，每人限领</span>
                <Input
                  placeholder="限领数量"
                  v-model="form.limitNum"
                  style="width:80px;margin:0px 10px"
                />
                 <span>张</span>
          </div>
          <div style="color:#ff0000">
            * 发放数量不能低于领取数量
          </div>
        </FormItem>
        <FormItem label="发放时间：" prop="imUrl">
                 <Date-picker
                    ref="brithdayPicker"
                    type="datetime"
                    :disabled='query.id?true:false'
                    v-model="form.beginTime"
                    placeholder="请选择时间"
                    style="width:110px"
                  ></Date-picker>
                  <span style="margin:0px 10px">至</span>
                  <Date-picker
                    ref="brithdayPicker"
                    type="datetime"
                    :disabled='query.id?true:false'
                    v-model="form.endTime"
                    placeholder="请选择时间"
                    style="width:110px"
                  ></Date-picker>
        </FormItem>
        
         <FormItem>
          <div class="footer">
            <Button @click="ModalCancel">取消</Button>
            <Button
              style="margin-left: 10px"
              type="primary"
              @click="getConfirm"
              >确认</Button
            >
          </div>
        </FormItem>
      </Form>
      
    </div>
  
  </div>
</template>

<script>
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import {apiProducttypeList} from '@/api/classification-manage.js'
import {apiCouponactivitySave,apiCouponactivityUpdate,apiCouponactivityInfo} from '@/api/coupon-package.js'
import { getLoaclTime } from '@/libs/util'
export default {
  name: "advertisement-edit",
  components: {
    Treeselect
  },
  data() {
    return {

      form: {
            id:'',
            beginTime:'',
            discountAmount:'',
            getNum:'',
            limitNum:'',
            num:'',
            qualifiedAmount:'',
            endTime:'',
            rate:'',
            status:'',
            title:'',
            type:'',
            usedNum:'',
            validityDay:'',
            typeList:[]
      },
      typeList:[],

      // query参数
      query: {},
      // 搜索参数
      search: {},
      diyDom: {},
      diyData: {
        rules: {},
        
      },
      apiData:{
        producttypeList:[],
      }
    };
  },
  methods: {
   
    getConfirm(){
      var that=this
      var typeList=[]
      that.apiData.productList.forEach(v => {
        if(that.typeList.includes(v.id)){
          var obj={
            id:v.id,
            parentId:v.parentId,
          }
          typeList.push(obj)
        }
      });
        var opt=this.form
        opt.beginTime= getLoaclTime(this.form.beginTime)
        opt.endTime= getLoaclTime(this.form.endTime)
        opt.typeList= typeList
        if(opt.id){
          apiCouponactivitySave(opt).then(res=>{
            if(res.code==200){
                this.$Message.success('操作成功');
                this.$router.go(-1)
            }else{
                this.$Message.error(res.msg)
            } 
        })
        }else{
          apiCouponactivitySave(opt).then(res=>{
            if(res.code==200){
                this.$Message.success('操作成功');
                this.$router.go(-1)
            }else{
                this.$Message.error(res.msg)
            }
        })
        }
        
    },
     getProducttypeList(){
        apiProducttypeList().then(res => {
            var obj=[]
            for(var i=0;i<res.data.length;i++){
                if(res.data[i].level==1){
                    var data=res.data[i]
                    data.children=[]
                    data.isEdit=false
                    data.label=data.name,
                    obj.push(data)
                }else{
                    obj=obj.map(item=>{
                        if(item.id==res.data[i].parentId){
                            var children=res.data[i]
                            children.isEdit=false
                            children.label=children.name, 
                            item.children.push(children)
                        }
                        return item
                    })
                }               
            }
            this.apiData.productList=res.data
            this.apiData.producttypeList=obj
        });
    },
    ModalCancel(){
      this.$router.go(-1)
    },
    getCouponactivityInfo(){
      apiCouponactivityInfo({id:this.$route.query.id}).then(res=>{
          this.form={
            id:this.$route.query.id,
            beginTime:res.data.beginTime,
            endTime:res.data.endTime,
            discountAmount:res.data.discountAmount,
            getNum:res.data.getNum,
            limitNum:res.data.limitNum,
            num:res.data.num,
            qualifiedAmount:res.data.qualifiedAmount,
            rate:res.data.rate,
            status:res.data.status+'',
            title:res.data.title,
            type:res.data.type+'',
            usedNum:res.data.usedNum,
            validityDay:res.data.validityDay,
            typeList:res.data.typeList
        }
        this.typeList=res.data.typeList.map(res=>{
          return res.id+''
        })
      })
    },
  },
  mounted() {
    this.query = this.$route.query;
    this.getProducttypeList()
    if(this.$route.query.id){
      this.getCouponactivityInfo()
        // var row=JSON.parse(this.$route.query.row)
        // this.form={
        //     id:this.$route.query.id,
        //     beginTime:row.beginTime,
        //     endTime:row.endTime,
        //     discountAmount:row.discountAmount,
        //     getNum:row.getNum,
        //     limitNum:row.limitNum,
        //     num:row.num,
        //     qualifiedAmount:row.qualifiedAmount,
        //     rate:row.rate,
        //     status:row.status+'',
        //     title:row.title,
        //     type:row.type+'',
        //     usedNum:row.usedNum,
        //     validityDay:row.validityDay,
        //     typeList:row.typeList
        // }
    }
  },
};
</script>

<style scoped lang="less">
.max-w200{
    max-width: 200px;
    width: 100%;
}
.advertisement-center {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .advertisement-left {
    width:100%;
    background: #fff;
    min-height: 700px;
    padding: 40px;
    box-sizing: border-box;
    margin-right: 20px;
  }
}
</style>
